<!-- pages/njt/user/UserHome.vue -->
<template>
  <view class="container">
    <!-- 用户头像和信息 -->
    <view class="user-header">
      <u-icon name="account" color="#ccc" size="80"></u-icon>
      <view class="user-info">
        <text class="user-name">{{ userStore.user.companyName || '未知公司' }}</text>
        <u-tag :text="perfectBadge.text" :type="perfectBadge.type" size="mini"></u-tag>
      </view>
      <u-button
          type="default"
          size="mini"
          :custom-style="{
          width: '160rpx',
          height: '60rpx',
          lineHeight: '60rpx',
          fontSize: '28rpx',
          color: '#fff',
          backgroundColor: '#ccc',
          borderRadius: '8rpx'
        }"
      >个人资料
      </u-button>
    </view>
    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" v-for="(item, index) in functions" :key="index" @click="handleClick(item)">
        <u-icon :name="item.icon" color="#3cc51f" size="32"></u-icon>
        <text class="function-text">{{ item.title }}</text>
        <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
      </view>
    </view>
    <!-- tabbar -->
    <view class="tabbar">
      <u-tabbar
          v-model="currentIndex"
          :value="currentIndex"
          :fixed="true"
          :placeholder="false"
          :safeAreaInsetBottom="true"
          activeColor="#3cc51f">
        <u-tabbar-item v-for="(item,index) in tablist" :key="index"
                       @click="switchTab(item)"
                       :text="item.text" :icon="item.name" :name="item.name"></u-tabbar-item>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
import {useUserStore} from '@/store/user';
import {post} from "@/utils/request";

export default {
  data() {
    return {
      currentIndex: "account",
      tablist: [
        {
          "pagePath": "pages/njt/user/UserHome",
          "name": "home",
          "text": "首页"
        },
        {
          "pagePath": "pages/njt/user/UserInfo",
          "name": "account",
          "text": "个人"
        }
      ],
      user: {
        name: "",
        perfectFlag: true
      },
      functions: [
        {title: "修改密码", icon: "lock", click: "changePassword"},
        {title: "打印方式设置", icon: "setting", click: ""},
        {title: "打印设置", icon: "setting-fill", click: ""},
        {title: "打印机序列号认证", icon: "clock", click: ""},
        {title: "完善信息", icon: "account", click: ""},
        {title: "软件更新", icon: "reload", click: ""}
      ]
    }
  },
  computed: {
    // 响应式获取 Pinia store
    userStore() {
      return useUserStore()
    },
    perfectBadge() {
      const flag = this.userStore.user.perfectFlag
      return {
        type: flag === 1 ? 'success' : 'error',
        text: flag === 1 ? '已完善' : '未完善'
      }
    }
  },
  onLoad() {
    uni.hideTabBar()
  },
  methods: {
    // tabbar页面跳转
    switchTab(item) {
      uni.switchTab({
        url: "/" + item.pagePath,
      })
    },
    // 处理点击事件
    handleClick(item) {
      if (item.click && typeof this[item.click] === 'function') {
        this[item.click]()
      }
    },
    // 修改密码
    async changePassword() {
      // 弹出输入框获取新密码
      uni.showModal({
        title: '修改密码',
        editable: true,
        placeholderText: '请输入新密码',
        success: async (res) => {
          if (!res.confirm) return

          const newPassword = res.content.trim()
          if (!newPassword) {
            uni.showToast({title: '密码不能为空', icon: 'none'})
            return
          }

          const userId = this.userStore.user.id

          // 构造请求参数，确保字段名和后端 NjtUserRegister 对象一致
          const payload = {
            id: userId,          // 用户ID
            password: newPassword // 新密码
          }

          try {
            const result = await post('/nongjt/userAuth/forgetPassword', payload, true)
            if (result && result.code === 200) {
              uni.showToast({title: '修改成功', icon: 'success'})
            } else {
              uni.showToast({title: result.msg || '修改失败', icon: 'none'})
            }
          } catch (err) {
            console.error('修改密码失败:', err)
            uni.showToast({title: err.message || '修改失败', icon: 'none'})
          }
        }
      })
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

/* 用户头像和信息 */
.user-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.user-info {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 24rpx;
  flex-wrap: wrap;
  gap: 16rpx 8rpx;
}

.user-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 功能列表 */
.function-list {
  margin-top: 20rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.function-text {
  flex: 1;
  margin-left: 20rpx;
  font-size: 26rpx;
}
</style>